<script setup>
const props = defineProps({
    title: {
        type: String,
        default: "",
    },
    icon: {
        type: String,
        required: true,
    },
    // 图标类名
    className: {
        type: String || Array,
        default: "",
    },
});

const emit = defineEmits(["click"]);

const iconName = computed(() => {
    return `#icon-${props.icon}`;
});
</script>

<template>
    <svg
        class="svg-icon"
        :title="title"
        :class="className"
        aria-hidden="true"
        @click="emit('click')"
    >
        <use :xlink:href="iconName" />
    </svg>
</template>



<style lang="scss" scoped>
svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>